<template>
    <page-container>
        <view slot='center' class="video-box" v-if="videoObj != null">
            <!-- <image :src="staticImgUrl + 'chat/gobackIcon.png'" mode="widthFix" class="icon-item"></image> -->
            <view class="top-cancal" :style="{ top: StatusBar + 'px' }">
                <DownloadApp></DownloadApp>
                <view style="padding: 20rpx;" @click="cancalBtn">
                    <button class="cu-btn cuIcon bg-grey"><text class="lg text-white cuIcon-back"></text></button>
                </view>
            </view>

            <!-- #ifdef H5 -->
            <video id="video" class="video-player" :src="videoObj.video_url" :poster="videoObj.image" :controls="true" :direction="0" :autoplay="true" :http-cache="true" :loop="true" :enable-progress-gesture="false" :enable-play-gesture="false" :show-center-play-btn="false" :show-fullscreen-btn="false" :show-mute-btn="false" @click="changeVideoState" x5-video-player-type="h5-page">
            </video>
            <!-- #endif -->

            <!-- #ifdef MP-WEIXIN -->
            <swiper :duration="500" :vertical="true" :current="currentEx" class="swiper" @change="swiperChange" :circular="true" v-if="showList.length > 0">
                <swiper-item v-for="(videoObj , index) in showList" :key="index">
                    <view class="swiper-item">
                        <video :id="'video' + index" class="video-player" :src="videoObj.video_url" :poster="videoObj.image" :controls="true" :direction="0" :data-index="videoObj.index" :data-swiperIndex="index" :autoplay="false" :http-cache="true" :loop="true" :enable-progress-gesture="false" :enable-play-gesture="false" :show-center-play-btn="false" :show-fullscreen-btn="false" :show-mute-btn="false" @click="changeVideoState" x5-video-player-type="h5-page">
                        </video>
                    </view>
                </swiper-item>
            </swiper>
            <image :src="videoObj.image" mode="aspectFit" v-else></image>
            <!-- #endif -->
            <!-- 工具栏 -->
            <view class="video-toolbar">
                <view class="toolbar-item df-col-cen">
                    <view @click="toolbarBtn('love', videoObj)">
                        <image :src="is_love == 1 ? staticImgUrl + 'live/live-ativer.png' : staticImgUrl + 'live/give_icon.png'" mode="" class="toolbar-icon"></image>
                    </view>
                    <view class="toolbar-num">{{ love_num }}</view>
                </view>
                <view class="toolbar-item df-col-cen">
                    <view @click="toolbarBtn('collect', videoObj)">
                        <image :src="is_collect == 1 ? staticImgUrl + 'live/collection-ativer.png' : staticImgUrl + 'live/collection_icon.png'" mode="" class="toolbar-icon"></image>
                    </view>
                    <view class="toolbar-num">{{ collect_num }}</view>
                </view>
                <view class="toolbar-item df-col-cen">
                    <view @click="toolbarBtn('comment', videoObj)">
                        <image :src="staticImgUrl + 'live/comment_icon.png'" mode="" class="toolbar-icon"></image>
                    </view>
                    <view class="toolbar-num">{{ comment_num }}</view>
                </view>
                <view class="toolbar-item df-col-cen">
                    <!-- #ifdef MP-WEIXIN -->
                    <button class="toolbar-share" @click="toolbarBtn('shrae',videoObj)">
                        <view>
                            <image :src="staticImgUrl + 'live/forward_icon.png'" mode="" class="toolbar-icon"></image>
                        </view>
                    </button>
                    <!-- #endif -->
                    <!-- #ifdef H5 -->
                    <view @click="toolbarBtn('shrae',videoObj)">
                        <image :src="staticImgUrl + 'live/forward_icon.png'" mode="" class="toolbar-icon"></image>
                    </view>
                    <!-- #endif -->
                    <view class="toolbar-num">{{ videoObj.read_num }}</view>
                </view>
            </view>
            <!-- 用户信息 -->
            <view class="video-left-info">
                <view class="df-ai-cen">
                    <view @tap="gotos(videoObj)">
                        <avatar-name :avatar="videoObj.headimg" :name="videoObj.nickname" headSize="lg" color="#ffffff" :nameWidth="200"></avatar-name>
                    </view>
                    <button class="cu-btn round bg-orange-red shadow sm margin-left" @click="subscribeBtn" v-if="videoObj.is_subscribe == 0">关注</button>
                    <button class="cu-btn round bg-red shadow sm margin-left" @click="subscribeBtn" v-if="videoObj.is_subscribe == 1">已关注</button>
                </view>
                <view class="video-title margin-top" style="width: 680rpx;">{{ videoObj.title }}</view>
                <view class="video-dace margin-top" v-if="videoObj.content">{{ videoObj.content }}</view>
                <view class="video-goods-box margin-top" v-if="videoObj.good != undefined">
                    <scroll-view class="scroll-goods" :scroll-x="true" :scroll-with-animation="true">
                        <view class="scroll-goods-item " v-for="(item, inx) in videoObj.good" :key="inx" @click="goodsBtn(item)">
                            <view class="df-ai-cen">
                                <image :src="$util.img(item.sku_image)" mode="" class="goods-img"></image>
                                <view class="video-goods-info">
                                    <view class="goods-title line-text">{{ item.sku_name }}</view>
                                    <view class="slightly-red">￥{{ item.price }}</view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
            <!-- 评论 -->
            <view v-if="showComment" class="zbccomment" @click="closeComment"></view>
            <block v-if="showComment">
                <view class="commentBoxs animation-slide-bottom" style="animationDelay:0.01s;">
                    <view class="top-infos">
                        <view>
                            <view class="top-infos-text">评论<text class="top-infos-nums">{{comment_num}}条</text></view>
                        </view>
                        <view @click="closeComment">
                            <view><text class="lg text-gray cuIcon-roundclosefill" style="font-size: 40rpx;"></text></view>
                        </view>
                    </view>
                    <scroll-view class="scroll-commentBoxs" :scroll-y="true" @scrolltolower="scrolltolower" :scroll-with-animation='true'>
                        <block v-if="getCommentListInfo.length==0">
                            <view style="width: 230rpx;height: 160rpx;margin: 0 auto;">
                                <image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png" mode="" style="width: 100%;height: 100%;"></image>
                            </view>
                            <view style="text-align: center;padding-top: 30rpx;color: #C8C7CC">~ 暂无评论 ~</view>
                        </block>
                        <block v-else v-for="(item,index) in getCommentListInfo" :key="index">
                            <view class="scroll-commentBoxs-content">
                                <view class="usercommentheader">
                                    <image v-if="item.headimg" :src="item.headimg" mode="" style="width: 100%;height: 100%;border-radius: 50%;"></image>
                                    <image v-else :src="staticImgUrl + 'logo.png'" mode="" style="width: 100%;height: 100%;border-radius: 50%;"></image>
                                </view>
                                <view class="info-comment-content">
                                    <view class="info-comment-content-name">{{item.nickname}}</view>
                                    <view class="info-comment-content-text">{{item.comment}}</view>
                                    <view class="info-comment-content-time">{{$util.dateStr(item.createtime*1000)}}</view>
                                </view>
                                <view class="">
                                    <view class="commentLikeicon" @click="loveBtn(item)">
                                        <image v-if="item.is_love==0" :src="staticImgUrl + 'home/give_icon.png'" mode="" style="width: 100%;height: 100%;"></image>
                                        <image v-else :src="staticImgUrl + 'home/live-ativer.png'" mode="" style="width: 100%;height: 100%;"></image>
                                    </view>
                                    <view class="commentLikeText">{{item.love_num}}</view>
                                </view>
                            </view>
                            <view class="fgx"></view>
                        </block>
                    </scroll-view>
                    <view class="input-commentBoxs" :style="{'bottom':inputWrapHeight}">
                        <view class="usercommentheader">
                            <image :src="userInfo.headimg || staticImgUrl + 'logo.png'" mode="" style="width: 100%;height: 100%;border-radius: 50%;"></image>
                        </view>
                        <view class="searchI">
                            <view class="search-box">
                                <input type="text" value="" placeholder="说点什么吧..." class="seach-input" v-model="keyText" confirm-type="send" :adjust-position='false' @confirm='confirmBtn' @focus='focusInput' @blur='blurInput' />
                            </view>
                        </view>
                    </view>
                </view>
            </block>
            <!-- #ifdef H5 -->
            <block v-if="!isNativeApp() && shareContent != null">
                <wx-config :shareContent="shareContent"></wx-config>
            </block>
            <!-- #endif -->
            <block v-if="showFenXiang==true">
                <fenxiang @closeFx="closeFx"></fenxiang>
            </block>
        </view>
    </page-container>
</template>

<script>
import fenxiang from '@/livePages/components/fenxiang.vue'
import DownloadApp from '@/common/components/global/download-app.vue'
// #ifdef H5
import wxConfig from '@/common/components/global/wx-config.vue'
// #endif
import {
	mapGetters,
	mapMutations
} from 'vuex'
import utils from './utils.js'
export default {
	data() {
		return {
			showFenXiang: false,
			// #ifdef MP-WEIXIN
			StatusBar: this.StatusBar + 10,
			// #endif
			// #ifdef H5
			StatusBar: this.StatusBar,
			// #endif
			videoObj: null,
			videoList: [],
			videoContext: null,
			// videoIndex: 0,//当前视频索引
			suspendType: false,
			is_love: 0,
			is_collect: 0,
			love_num: 0,
			collect_num: 0,
			comment_num: 0,
			shareContent: null,
			getCommentListInfo: [],
			keyText: '',
			count: 0,
			showComment: false,
			pagecomment: 1,
			content_id: null,
			videoObjHeadimg: null,
			shareContent: {
				title: '醒目购', // 分享标题
				shareObjectDesc: '醒目购，够醒目，醒目就购啦！', // 分享描述
				thumbUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/logo.png' // 分享图标
			},
			timer: null,

			baseList: [], // 基础数据列表
			showList: [], // 当前显示的列表
			swiperIndex: 0, // 当前swiper的索引
			videoIndex: 0, // 当前视频播放的索引
			videoState: true, // 当前视频播放的状态
			defualtVideoId: null, // query字符串从第几个视频开始
			currentEx: 0, // 控制回弹字段

			sqlArray: [], // 模拟后台数据表
			sayIs: false,
			inputWrapHeight: '0px', // 处理输入框
			systemInfo: {},
			Keyboard: 0 // 键盘高度

		}
	},
	onLoad(e) { },
	onShow() {
		this.initVideo()
	},
	mounted() {
		let that = this
		// this.calcMaskHeight();

		const info = wx.getSystemInfoSync()
		console.log(info)
		if (info) this.platform = info.platform
		this.systemInfo = info
	},
	onReady() {
		// #ifdef H5
		this.videoContext = uni.createVideoContext('video')
		this.videoContext.play()
		// #endif
	},
	components: {
		fenxiang,
		DownloadApp,
		// #ifdef H5
		wxConfig
		// #endif
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	onHide() {
		this.showFenXiang = false
	},
	watch: {
		// 监听swiperindex发生改变时对showlist数据进行更新
		// 关闭上一个swiperitem的视频播放,自动播放当前的视频
		swiperIndex(newVal, oldVal) {
			// 查询获得当前视频播放索引
			uni.createSelectorQuery().in(this)
				.selectAll('.video-player').boundingClientRect(res => {
					if (res.length > 0) {
						let nowItem = res[newVal]
						if (nowItem.dataset.index != -1) {
							let oldItem = res[oldVal]
							// console.log(oldItem.dataset, 'oldItem.dataset-------------')
							// console.log(nowItem.dataset, 'nowItem.dataset+++++++++++++')
							this.videoIndex = nowItem.dataset.index
							this.setShowList()
						} else {
							this.getList(this.baseList[this.videoIndex].videoId)
							this.currentEx = oldVal
						}
					}
				}).exec()

			this.videoState = true
		},
		// 监听baselist数据发生改变时对当前的showlist进行数据更改
		baseList() {
			this.setShowList()
		}

	},
	onReady() { },
	methods: {
		closeFx(e) {
			this.showFenXiang = e
		},
		loveBtn(item) {
			if (item.is_love == 1) {
				return
			}
			this.$request.fabulousComment({ comment_id: item.id }).then(res => {
				console.log(res)
				this.getCommentList(1, this.content_id)
			})
		},
		confirmBtn(content_id) {
			if (this.keyText == '') {
				this.$util.tip('说点什么吧...')
				return
			}
			if (this.sayIs) return false
			this.sayIs = true
			setTimeout(() => {
				this.sayIs = false
			}, 120)

			this.$request.pushComment({
				content_id: this.content_id,
				comment: this.keyText
			}).then(res => {

				this.$util.tip('发送成功')
				this.keyText = ''
				this.getCommentList(1, this.content_id)
			}).catch(err => {
				this.$util.tip('发送失败')
			})
		},
		/**
         * 输入框获取焦点
         */
		focusInput(e) {
			console.log(e, 'eeeeeeeeeeeeeeeee')
			let that = this
			let { screenHeight, screenWidth, statusBarHeight, windowHeight } = this.systemInfo
			this.machineHeight = screenHeight - windowHeight // 虚位高度
			let dp = screenWidth / screenHeight
			console.log(dp, '123123123')
			if (e) {
				let { height } = e.detail // 获取键盘高度
				this.inputWrapHeight = `${height}px`
				console.log(this.inputWrapHeight, 'this.inputWrapHeightthis.inputWrapHeight')
				// if (height) this.inputWrapHeight = `${height * dp}px`
			}
		},
		/**
         * 失去焦点
         */
		blurInput() {
			this.inputWrapHeight = 0
		},
		scrolltolower(e) {
			if (e.detail.direction == 'bottom') {
				let page = this.pagecomment
				page++
				this.getCommentList(page, this.content_id)
			}
		},
		openComment() {
			this.showComment = true
		},
		closeComment() {
			this.showComment = false
		},
		// 获取评论
		getCommentList(page, content_id) {

			this.$request
				.getCommentList({
					content_id,
					page
				}).then(res => {
					console.log(res)
					if (page > 1 && res.data.list.length == 0) {
						this.$util.tip('已经到底了')
						return
					}
					this.comment_num = res.data.count
					if (page != 1) {
						this.getCommentListInfo = this.getCommentListInfo.concat(res.data.list)
						this.pagecomment = page
					} else {
						this.getCommentListInfo = []
						this.getCommentListInfo = res.data.list
						this.pagecomment = page
					}
				})

		},
		gotos(item) {
			console.log(item)
			if (item.site_id != 0) {
				this.$Router.push({
					path: '/shopPages/creation/produce',
					query: {
						site_id: item.site_id,
						member_id: item.member_id
					}
				})
			} else {
				this.$Router.push({
					path: '/shopPages/creation/creation',
					query: {
						member_id: item.member_id
					}
				})
			}
		},
		swiperChange(e) {
			this.currentEx = this.swiperIndex = e.detail.current
			this.timer && clearTimeout(this.timer)
			this.timer = setTimeout(() => {
				this.videoObj = this.showList[e.detail.current]
				this.getCommentList(1, this.showList[e.detail.current].id)
				this.love_num = this.videoObj.love_num
				this.collect_num = this.videoObj.collect_num
				this.comment_num = this.videoObj.comment_num
				this.is_love = this.videoObj.is_love
				this.is_collect = this.videoObj.is_collect
				if (this.sqlArray.length - this.videoIndex < 4) {
					this.getVideoList()
				}
			}, 300)
		},
		// 获取视频
		initVideo() {
			uni.showLoading({
				title: '加载中'
			})
			let optios = this.$util.queryObj()
			this.$request
				.getGraphicAndVideoAndLiveInfo({
					content_id: optios.video_id,
					type: 'video'
				})
				.then(async (res) => {
					this.getVideoList(res.data)

					if (res.data.headimg == null || res.data.headimg == '') {
						if (res.data.site_id != 0) {
							res.data.headimg =
                                'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/logo.png'
						} else {
							res.data.headimg =
                                'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/shop/avatar.png'
						}
					}
					this.videoObj = res.data
					// console.log("this.videoObj",this.videoObj)
					let params = {
						page_size: 10
					}
					const videoList = await this.$request.getGraphicAndVideoList(params).then(res => res.data)
					console.log(videoList)
					let tmpVideoArr = [res.data, ...this.videoList, ...videoList]
					tmpVideoArr.forEach((item, index) => {
						item.autoPlay = index === 0
					})
					this.videoList = tmpVideoArr
					// console.log('this.videoList',this.videoList)
					this.shareContent = {
						title: res.data.title, // 分享标题
						shareObjectDesc: '醒目购，够醒目，醒目就购啦！', // 分享描述
						thumbUrl: res.data.image // 分享图标
					}
					console.log(res.data.love_num)
					this.love_num = res.data.love_num
					this.collect_num = res.data.collect_num
					this.comment_num = res.data.comment_num
					this.is_love = res.data.is_love
					this.is_collect = res.data.is_collect
					this.content_id = res.data.id
					this.getCommentList(1, res.data.id)
					uni.hideLoading()

				})
				.catch(err => {
					uni.hideLoading()
				})
		},
		async getVideoList(res) {
			// console.log(res)
			let params = {
				page_size: 10
			}
			const videoList = await this.$request.getGraphicAndVideoList(params).then(res => res.data)
			for (let i = 0; i < videoList.length; i++) {
				if (videoList[i].headimg == null || videoList[i].headimg == '') {
					console.log('videoList[i].headimg', videoList[i])
					if (videoList[i].site_id != 0) {
						videoList[i].headimg =
                            'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/logo.png'
					} else {
						videoList[i].headimg =
                            'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/shop/avatar.png'
					}
				}
			}
			// console.log("getGraphicAndVideoList",videoList)
			this.sqlArray = res ? [res, ...this.sqlArray, ...videoList] : [...this.sqlArray, ...videoList]
			this.sqlArray.forEach((item, index, array) => {
				item.videoId = index
			})
			if (this.defualtVideoId == null) {
				this.defualtVideoId = this.sqlArray[0].videoId
			} else {
				this.defualtVideoId = this.sqlArray[this.videoIndex].videoId
			}
			if (res) this.getList()
		},
		// 获取数据列表
		getList: utils.debounce(function (id) {

			// 1. 首次加载时若想即可向上也可向下滑动那么后台数据返回时应当返回上中下
			// 2. 若用户向下滑动到底部那应加载下面的视频
			// 3. 若用户向上滑动到顶部那应加载上面的视频

			if (id == undefined) this.baseList = []

			// 使用promise来模拟请求，
			new Promise((resolve, reject) => {

				// 此处为模拟后台接口,与前端无关系
				let data = {
					pre_video: [], // 上
					current: {}, // 当前
					after_video: [] // 下
				}

				let tempId = id == undefined ? this.defualtVideoId : id

				if (tempId != undefined) {
					for (var i = 0; i < this.sqlArray.length; i++) {
						let item = this.sqlArray[i]
						if (tempId == item.videoId) {
							// 上拉加载 向前取3 再加当前 向后取10
							// 下拉加载 向前取10 再加当前 向后取3
							for (var j = 1; j < (id ? 11 : 4); j++) {
								let index = i - j
								if (index >= 0) {
									data.pre_video.push(this.sqlArray[index])
								} else {
									break
								}
							}
							for (var j = 1; j < (id ? 4 : 11); j++) {
								let index = i + j
								if (index < this.sqlArray.length) {
									data.after_video.push(this.sqlArray[index])
								} else {
									break
								}
							}
							data.current = item
						}
					}
				}
				setTimeout(() => {
					resolve(JSON.parse(JSON.stringify(data)))
				}, 1000)
			})
				.then(res => {
					// 此处模拟数据返回
					// id存在表示加载更多视频
					if (id != undefined) {
						let arr = id < this.defualtVideoId ? res.pre_video : res.after_video
						if (arr.length <= 0) {
							uni.showToast({
								title: '暂无更多视频',
								icon: 'none'
							})
							return
						}
						// 下滑加载
						else if (id < this.defualtVideoId) {
							this.baseList.unshift(...arr.reverse())
							this.videoIndex = this.videoIndex + arr.length // 保持当前索引
						}
						// 上滑加载
						else {
							this.baseList = this.baseList.concat(arr)
						}

					} else {
						this.baseList = res.pre_video.reverse()
						this.baseList.push(res.current)
						this.baseList = this.baseList.concat(res.after_video)
					}

					// 给数组元素添加默认索引
					let index = 0
					this.baseList.forEach(item => {
						item.index = index++
						if (id == undefined && item.videoId == this.defualtVideoId) {
							this.videoIndex = item.index
						}
					})
				})

		}, 500),

		// 修改当前视频的播放状态
		changeVideoState(e) {
			let video = uni.createVideoContext(e.currentTarget.id, this)
			this.videoState ? video.pause() : video.play()
			this.videoState = !this.videoState
		},
		// 对showlist(swiper所展示数据)
		setShowList() {
			let {
				videoIndex,
				swiperIndex
			} = this.$data
			let list = this.baseList

			if (!(list && list.length > 0))
				return

			// 获取当前视频索引的上下视频
			let upVideo, nowVideo, nextVideo, noneVideo = {
				index: -1
			}

			// 获取上下视频然后到 顶/底 时则使用nonevideo占位
			upVideo = videoIndex - 1 < 0 ? noneVideo : list[videoIndex - 1]
			nowVideo = list[videoIndex]
			nextVideo = videoIndex + 1 >= list.length ? noneVideo : list[videoIndex + 1]

			// 获取当前swiperIndex的上下索引
			let upSwiperIndex = swiperIndex - 1 < 0 ? 2 : swiperIndex - 1
			let nextSwiperIndex = swiperIndex + 1 >= 3 ? 0 : swiperIndex + 1

			// 对showlist进行重新赋值
			this.showList[upSwiperIndex] = upVideo
			this.showList[swiperIndex] = nowVideo
			this.showList[nextSwiperIndex] = nextVideo

			// 播放当前选择的视频关闭其他的视频
			uni.createVideoContext(`video${upSwiperIndex}`, this).stop()
			uni.createVideoContext(`video${nextSwiperIndex}`, this).stop()
			uni.createVideoContext(`video${swiperIndex}`, this).play()
		},

		cancalBtn() {
			this.$util.back(1)
			console.log('log关闭')
		},
		toolbarBtn(type, videoObj) {
			let content_id = videoObj.id
			if (type == 'love') {
				this.$request.fabulousContent({ content_id }).then(res => {
					console.log('love', res)
					this.is_love = res.data.is_love
					this.love_num = res.data.love_num
				})
				// $Axios
				// 	.post('api/content/FabulousContent', {
				// 		content_id
				// 	})
				// 	.then(res => {
				// 		console.log('love', res)
				// 		this.is_love = res.is_love
				// 		this.love_num = res.love_num
				// 	})
			} else if (type == 'collect') {
				this.$request.collectContent({ content_id }).then(res => {
					console.log('collect', res)
					this.is_collect = res.data.is_collect
					this.collect_num = res.data.collect_num
				})
			} else if (type == 'comment') {
				this.openComment()
			} else if (type == 'shrae') {
				// console.log('log', videoObj);
				// console.log("shareContent",this.shareContent)
				// // #ifdef H5
				// if (this.isNativeApp()) {
				// 	this.$Sdk.share(videoObj.title, location.href, videoObj.image ||
				// 		'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/logo.png')
				// } else {
				// 	console.log('H5分享', );
				// 	this.$Utils.tip('~点击右上角分享给好友~')
				// }
				// // #endif

				// #ifdef H5
				if (this.isNativeApp()) {
					var urlnews = location.href.indexOf('?') == -1 ? '?' : '&'
					this.$Sdk.share(videoObj.title, location.href + urlnews + 'source_member=' + this
						.userInfo.member_id, videoObj.image ||
                    'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/logo.png')
				} else {
					this.showFenXiang = !this.showFenXiang
					console.log('H5分享', this.showFenXiang)
				}
				// #endif
				// #ifdef MP-WEIXIN
				this.showFenXiang = !this.showFenXiang
				console.log('小程序分享', this.showFenXiang)
				// #endif

			}
		},
		// 判断是否关注用户
		subscribeBtn() {
			if (!this.$util.isLoginCall()) return false
			if (this.videoObj.is_subscribe === 1) {
				uni.showModal({
					title: '温馨提示',
					content: '确定真的不关注视频君了吗？ ┭┮﹏┭┮',
					success: res => {
						if (res.confirm) {
							this.$request
								.deleteMemberFollow({
									followers_id: this.videoObj.member_id
								})
								.then(res => {
									this.videoObj.is_subscribe = 0
									this.$util.tip('香菇蓝瘦，┭┮﹏┭┮')
								})
						}
					}
				})
			} else {
				this.$request
					.addMemberFollow({
						followers_id: this.videoObj.member_id
					})
					.then(res => {
						this.videoObj.is_subscribe = 1
						this.$util.tip('好嗨森~~~(#^.^#)')
					})
			}
		},
		ceshi() {
			this.$Utils.tip('该功能暂未开放，敬请期待。(#^.^#)')
		},
		goodsBtn(val) {
			this.$Router.push({
				path: '/shopPages/goods/detail',
				query: {
					goods_id: val.sku_id,
					is_id: val.sku_id
				}
			})
			// console.log('log', val.sku_id);
		},
		// 视频暂停触发
		pauseFn(e) {
			this.suspendType = true
			// console.log('视频暂停触发', e);
		},
		// 视频播放触发
		playFn(e) {
			this.suspendType = false
			console.log('视频播放触发', e)
		}
	},
	mounted() { },
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target)
		}
		return {
			title: this.videoObj.title,
			// path: '/pages/index/index',
			imageUrl: this.videoObj.image
		}
	},
	onShareTimeline(res) {
		return {
			title: this.videoObj.title,
			// path: '/pages/index/index',
			imageUrl: this.videoObj.image
		}
	}
}
</script>

<style lang="scss">
.video-box {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    .icon-item {
        width: 30rpx;
    }

    .top-cancal {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99;
    }

    .swiper {
        width: 100%;
        height: 100vh;

        .swiper-item {
            width: 100%;
            height: 100%;

            video {
                pointer-events: auto !important;
            }
        }
    }

    .video-toolbar {
        position: absolute;
        top: 50%;
        right: 40rpx;
        transform: translateY(-50%);
        z-index: 99;

        .toolbar-item {
            margin-bottom: 30rpx;
        }

        .toolbar-share {
            padding: 0;
            line-height: 1;
            background-color: transparent;
        }

        .toolbar-icon {
            width: 50rpx;
            height: 50rpx;
        }

        .toolbar-num {
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
        }
    }

    .video-left-info {
        position: absolute;
        width: 100%;
        left: 40rpx;
        bottom: 80rpx;
        z-index: 99;

        .video-title {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
        }

        .video-dace {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
        }

        .video-goods-box {
            width: 700rpx;
            padding-right: 30rpx;

            .scroll-goods {
                white-space: nowrap;
                width: 100%;
            }

            .scroll-goods-item {
                position: relative;
                display: inline-block;
                width: 550rpx;
                margin-right: 20rpx;
                padding: 20rpx 10rpx;
                border-radius: 20rpx;
                background-color: rgba(59, 59, 59, 1);
            }

            .goods-img {
                width: 120rpx;
                height: 120rpx;
            }

            .video-goods-info {
                margin-left: 20rpx;
                max-width: 360rpx;
                margin-right: 20rpx;
            }

            .goods-title {
                width: 100%;
                margin-bottom: 20rpx;
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #ffffff;
            }
        }
    }

    .video-player {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
    }

    .video-mask {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 2;
    }
}

.commentBoxs {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 1049rpx;
    background: #ffffff;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    z-index: 99999;
}

.scroll-commentBoxs {
    width: 90%;
    height: 800rpx;
    margin: 0 auto;
}

.input-commentBoxs {
    width: 100%;
    margin: 0 auto;
    height: 192rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 40rpx 10rpx rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-bottom: 60rpx;
    position: absolute;
    bottom: 0;
}

.top-infos {
    width: 90%;
    margin: 30rpx auto;
    display: flex;
    justify-content: space-between;
}

.top-infos-text {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #222222;
}

.top-infos-nums {
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    padding-left: 10rpx;
}

.scroll-commentBoxs-content {
    display: flex;
    justify-content: space-around;
}

.fgx {
    width: 100%;
    height: 1rpx;
    background: #f4f4f4;
    margin-top: 40rpx;
    margin-bottom: 40rpx;
}

.usercommentheader {
    width: 65rpx;
    height: 66rpx;
    border-radius: 50%;
}

.commentLikeicon {
    width: 48rpx;
    height: 48rpx;
    margin: 0 auto;
}

.info-comment-content {
    width: 460rpx;
}

.info-comment-content-name {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
}

.info-comment-content-text {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #222222;
}

.info-comment-content-time {
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    padding-top: 30rpx;
}

.commentLikeText {
    max-width: 90rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #222222;
    padding-top: 20rpx;
}

.searchI {
    display: flex;
    align-items: center;
    justify-content: space-around;

    .search-box {
        width: 616rpx;
        height: 70rpx;
        background: #f4f4f4;
        border-radius: 35px;
        position: relative;

        .seach-input {
            width: 100%;
            height: 65rpx;
            background: #f4f4f4;
            border-radius: 28px;
            box-sizing: border-box;
            padding: 0 40rpx;
            font-weight: 500;
            color: #aaaaaa;
            font-size: 24rpx;
        }

        .seach-icon {
            width: 24rpx;
            height: 24rpx;
            position: absolute;
            left: 24rpx;
            top: 16rpx;
        }
    }
}

.zbccomment {
    position: absolute;
    left: 0px;
    top: 0px;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
    height: 100%;
    filter: alpha(opacity=60);
    /*设置透明度为60%*/
    opacity: 0.6;
    /*非IE浏览器下设置透明度为60%*/
    z-index: 999;
}
</style>
